<template>
  <div id="outer">
    <div style="height:20px"></div>
    <div id="slideshow">
      <el-carousel indicator-position="outside" height="500px">
        <el-carousel-item v-for="item in imgsrc" :key="item">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--商品列表  -->
    <div>
      <list ref="good"></list>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import list from "../components/list.vue";
import smallCarVue from "../components/smallCar.vue";
import headerVue from "../components/header.vue";
export default {
  components: {
    list,
    smallCarVue,
    headerVue
  },
  data() {
    return {
      flag: true,
      imgsrc: [
        { url: require("../assets/img/1.png") },
        { url: require("../assets/img/2.png") },
        { url: require("../assets/img/3.png") },
        { url: require("../assets/img/4.png") },
        { url: require("../assets/img/5.png") },
      ],
      formInline: {
        userName: "",
        userPassword: "",
      },
      products: [],
      address: [],
    };
  },
  methods: {
    login() {
      axios
        .get("/user/login", {
          params: {
            name: this.formInline.userName,
            password: this.formInline.userPassword,
          },
        })
        .then((response) => {
          var clientId = response.data;
          console.log(clientId);
          if (clientId.length <= 7) {
            alert("登录失败");
          } else {
            alert("登录成功");
            this.$store.commit("saveId", clientId);
            this.flag = false;
          }
        })
        .catch((error) => {
          //console.log(error);
        });
    },
    register() {
      axios
        .get("/user/register", {
          params: {
            name: this.formInline.userName,
            password: this.formInline.userPassword,
          },
        })
        .then((response) => {
          var flag = response.data;
          console.log(flag);
          if (flag == "OK") {
            alert("注册成功");
            this.login();
          } else {
            alert("注册失败");
          }
        })
        .catch((error) => {
          //console.log(error);
        });
    },
  },
  mounted: function () {
    this.$refs.good.loadData();
  },
};
</script>
<style>
#slideshow {
  width: 80%;
  margin-left: 10%;
  border-radius: 20%;
}

#outer {
  border: 5px;
  background-color: #ebeef0;
  border-block-color: #4f6176;
}
.el-carousel__item h3 {
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>